<template>
	<div class="main-center info">
		<Card style="width: 100%;">
			<p class="info-title" slot="title" onclick="postComment()">{{odata.title}}</p>
			<p v-html="odata.content"></p>
		</Card>
		<Card style="width: 100%;margin-top: 20px;">
			<div class="tourist" >您此次评论的昵称:<span><em class="adjective">{{tourist.adjective}}的</em><em class="tourist-name">{{tourist.name}}</em></span><button type="text" @click="getTourist">我要换个名字...</button></div>
			<div ref="editor" class="sd" style="text-align:left;"></div>
			<div style="margin-top: 20px;text-align: right;">
				<Button type="error" @click="postComment">发送评论</Button>
			</div>
			<div class="info-comment">
				<div class="info-comment-box" v-for="i in arrComment">
					<p class="title">#{{i.floor}}<span style="margin-left: 10px;" :class="[i.user?'':'master']">{{i.user || '帅气的站长大人'}}</span></p>
					<div class="info-comment-min" v-html="i.content"></div>
					<p class="hui-fa">发表于<time class="info-comment-time">{{i.createTime}}</time><em class="info-comment-hui" :id="i._id">回复</em></p>
					<template v-if="i.toId">
						<div class="info-comment-box info-comment-back" v-if="i.toId==j._id" v-for="j in arrComment">
							<p class="title"><form>WTF</form> #{{j.floor}}<span style="margin-left: 10px;" :class="[j.user?'':'master']">{{j.user || '帅气的站长大人'}}</span></p>
							<div class="info-comment-min" v-html="j.content"></div>
						</div>						
					</template>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	import { Card, Button } from 'iview';
	import * as api from '@/assets/api.js';
	import Editor from 'wangeditor';
	let Ami,editorAmi,toAmi;
	export default {
		name: 'info',
		components: {
			Card,
			Button
		},
		data() {
			return {
				odata: {
					title: '',
					content: ''
				},
				tourist: '',
				arrComment: []
			}
		},
		created() {
			this.getData()
			this.getTourist()
			this.getComment()
			Ami = this;
		},
		methods: {
			getData() {
				api.getData('getArticle?id=' + sessionStorage.getItem('id'), this).then((res) => {
					if(res.code == 200) {
						this.odata = res.data;
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
			},
			getTourist() {
				api.getData('getTourist', this).then((res) => {
					if(res.code == 200) {
						this.tourist = res.data
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
			},
			postComment() {
				let postData = {
					user: this.tourist.adjective + '的' + this.tourist.name,
					articleId: this.odata._id,
					content: this.editorContent,
					toId: ''
				}
				if(this.editor.txt.text().length < 10) {
					this.$Message.error('少于10个字是不给评论滴~');
					return;
				}

				api.postData('addComment', postData, this).then((res) => {
					if(res.code == 200) {
						this.getTourist()
						this.getComment()
						this.editor.txt.html('')
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
			},
			getComment() {
				api.postData('getComment', {
					id: sessionStorage.getItem('id')
				}, this).then((res) => {
					if(res.code == 200) {
						this.arrComment = res.data;
						//渲染完评论再绑定点击事件
						let that = this;
						this.$nextTick(() => {
							/**/
							$('.info-comment-hui').click(function() {
								$('.info-comment-hui').show();
								$(this).hide();
								$('#editorH-box').remove();
								$(this).parents('.hui-fa').after(`<div id="editorH-box"><div ref="editorH" id="editorH" class="sd" style="text-align:left;"></div><div style="margin-top: 20px;text-align: right;">
				<Button type="error" id="editorHbtn" onclick="postComment()">发送评论</Button>
			</div></div>`);
								toAmi = $(this).attr('id');
								var editor = new Editor('#editorH');
								let acn = [],
									acxn = [],
									accn = [],
									acqn = [],
									acmgn = [];
								for(let i = 0; i < 55; i++) {
									acn.push({
										alt: i + 1,
										src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
									})
									acxn.push({
										alt: i + 1,
										src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac2/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
									})
								}
								for(let i = 0; i < 50; i++) {
									accn.push({
										alt: i + 1,
										src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac3/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
									})
								}
								for(let i = 0; i < 40; i++) {
									acmgn.push({
										alt: i + 1,
										src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/tsj/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
									})
								}
								for(let i = 0; i < 16; i++) {
									acqn.push({
										alt: i + 1,
										src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/dog/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
									})
								}
								editor.customConfig.emotions = [{
										title: 'AC娘',
										type: 'image',
										content: acn
									},
									{
										title: 'AC新娘',
										type: 'image',
										content: acxn
									},
									{
										title: 'AC彩娘',
										type: 'image',
										content: accn
									},
									{
										title: 'AC魔改娘',
										type: 'image',
										content: acmgn
									},
									{
										title: 'AC犬娘',
										type: 'image',
										content: acqn
									}
								]
								editor.customConfig.uploadImgServer = 'http://www.shengliwudi.com:8086/upload'
						        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
						        editor.customConfig.uploadFileName = 'file'
						        editor.customConfig.zIndex = 1
								editor.create();
								editorAmi = editor;
							})

						})
					} else {
						this.$Notice.error({
							title: '提示',
							desc: res.msg,
						});
					}
				})
			}
		},
		mounted() {
			var editor = new Editor(this.$refs.editor)
			editor.customConfig.onchange = (html) => {
				this.editorContent = html
			}
			let acn = [],
				acxn = [],
				accn = [],
				acqn = [],
				acmgn = [];
			for(let i = 0; i < 55; i++) {
				acn.push({
					alt: i + 1,
					src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
				})
				acxn.push({
					alt: i + 1,
					src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac2/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
				})
			}
			for(let i = 0; i < 50; i++) {
				accn.push({
					alt: i + 1,
					src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac3/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
				})
			}
			for(let i = 0; i < 40; i++) {
				acmgn.push({
					alt: i + 1,
					src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/tsj/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
				})
			}
			for(let i = 0; i < 16; i++) {
				acqn.push({
					alt: i + 1,
					src: ('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/dog/') + ((i + 1) >= 10 ? i + 1 : ('0' + (i + 1))) + '.gif'
				})
			}
			editor.customConfig.emotions = [{
					title: 'AC娘',
					type: 'image',
					content: acn
				},
				{
					title: 'AC新娘',
					type: 'image',
					content: acxn
				},
				{
					title: 'AC彩娘',
					type: 'image',
					content: accn
				},
				{
					title: 'AC魔改娘',
					type: 'image',
					content: acmgn
				},
				{
					title: 'AC犬娘',
					type: 'image',
					content: acqn
				}
			]
			editor.customConfig.uploadImgServer = 'http://www.shengliwudi.com:8086/upload'
	        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
	        editor.customConfig.uploadFileName = 'file'
	        editor.customConfig.zIndex = 1
			editor.create();
			this.editor = editor;
		}

	}
	window.postComment=function(){
		let postData = {
			user: '',
			articleId: Ami.odata._id,
			content: editorAmi.txt.html(),
			toId: toAmi
		}
		if(editorAmi.txt.text().length < 10) {
			Ami.$Message.error('少于10个字是不给评论滴~');
			return;
		}
		api.postData('addComment', postData, Ami).then((res) => {
			if(res.code == 200) {
				Ami.getTourist()
				Ami.getComment()
				Ami.editor.txt.html('')
				$('#editorH-box').remove();
				$('.info-comment-hui').show();
			} else {
				Ami.$Notice.error({
					title: '提示',
					desc: res.msg,
				});
			}
		})
	}
</script>

<style>
	.ivu-card-head .info-title {
		font-size: 22px;
	}
	
	.main-center.info {
		display: block;
		padding-bottom: 20px;
	}
	
	.sd .w-e-text-container {
		height: 150px !important;
	}
	
	.tourist {
		margin-bottom: 10px;
		font-size: 12px;
		color: #333;
	}
	
	.tourist span {
		font-size: 14px;
	}
	
	.adjective {
		color: #92d050;
		text-decoration: underline;
		font-size: 16px;
	}
	
	.tourist-name {
		font-size: 18px;
		font-weight: bold;
		color: red;
	}
	
	.tourist button {
		background: none;
		border: none;
		color: #515a6e;
		font-size: 12px;
		margin-left: 20px;
		cursor: pointer;
		transition: color .2s
	}
	
	.tourist button:hover {
		color: #57a3f3;
	}
	
	.info-comment-box {
		color: #999;
		font-size: 12px;
		padding: 20px 0;
		border-bottom: 1px solid #ccc;
	}
	
	.info-comment-time {
		margin: 0 20px 0 10px;
	}
	
	.info-comment-hui {
		cursor: pointer;
	}
	
	.info-comment-min {
		padding: 10px 0;
		color: #333;
		font-size: 13px;
	}
	#editorH {
		margin-top: 5px;
	}
	.info-comment-back {
		padding: 10px;
		background: #eee;
		border: 1px dashed #ccc;
		margin-top: 10px;
	}
	.info-comment-back .info-comment-min {
		color: #8c8b8b;
	}
	.master {
		color: red;
	}
</style>